<template>
<div class="echarts">
</div>
</template>

<script>
export default {
  name: 'common_echarts',
  data () {
    return {
      charts: null
    }
  },
  props: {
    // 传入的echart绘制参数
    options: {
      type: Object,
      default: {}
    }
  },
  watch: {
    // 监听参数变化
    options: {
      handler: function (val) {
        // console.log(val)
        this.options = val
        this.renderCharts()
      },
      // 深度观察
      deep: true
    }
  },
  components: {},
  mounted () {},
  methods: {
    renderCharts () {
      // 销毁echarts并重绘
      if (null !== this.charts) {
        this.charts.dispose()
        this.charts = null
      }
      this.charts = this.$echarts.init(this.$el)
      this.charts.showLoading()
      this.charts.hideLoading()
      this.charts.setOption(this.options)
      // this.$emit('chartsInit', this.charts)
    }
  },
  created () {}
}
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
